<script setup>
import {ref, onMounted} from 'vue'
import {useRouter, useRoute} from "vue-router";
import {Tickets} from "@element-plus/icons-vue";
import {fetchProCateList, deleteProductCate, updateShowStatus, updateNavStatus} from '@/api/productCate'
import {ElMessage, ElMessageBox} from "element-plus";

const router = useRouter()
const route = useRoute()
onMounted(() => {
  resetParentId() // 重置父级id
  getProductCateList()
})
const parentId = ref(0)
const listQuery = {
  pageNum: 1,
  pageSize: 10,
}
const resetParentId = () => {
  listQuery.pageNum = 1
  if (route.query.parentId != null) {
    parentId.value = route.query.parentId
  } else {
    parentId.value = 0
  }
}
const tableData = ref([])
const total = ref(0)
const getProductCateList = async () => {
  const res = await fetchProCateList(parentId.value, listQuery)
  tableData.value = res.data.data.list
  total.value = res.data.data.total
}
// 查看下级
const handleShowNextLevel = (row) => {
  console.log(row.id)
}

// 转移商品
const handleTransferProduct = (row) => {
  console.log(row.name)
}
// 编辑
const handleEdit = (row) => {
  console.log(row.id, '编辑')
}
// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm('此操作将永久删除该分类, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteProductCate(row.id).then(() => {
      ElMessage.success('删除成功')
      getProductCateList()
    })
  }).catch(() => {
    // cancel
  })
}

// 导航开关
const handleNavStatus = (id, row) => {
  console.log('修改导航栏状态')
}

// 显示状态
const handleShowStatus = (id, row) => {
  console.log('修改显示状态')
}

// 页码改变
const handleCurrentChange = (currentPage) => {
  listQuery.pageNum = currentPage
  getProductCateList()
}

// 页码大小改变
const handleSizeChange = (pageSize) => {
  listQuery.pageSize = pageSize
  listQuery.pageNum = 1
  getProductCateList()
}
</script>

<template>
  <div class="cate-container">
    <div class="list-search">
      <div class="add-btn">
        <el-icon>
          <Tickets/>
        </el-icon>
        <span>数据列表</span>
      </div>
      <el-button type="primary" icon="plus" style="margin-left: 20px;">
        添加商品
      </el-button>
    </div>
    <!-- 列表-->
    <div class="list-container">
      <el-table :data="tableData" border>
        <el-table-column label="编号" width="100" align="center">
          <template #default="{row}">{{ row.id }}</template>
        </el-table-column>
        <el-table-column label="分类名称" align="center">
          <template #default="{row}">{{ row.name }}</template>
        </el-table-column>
        <el-table-column label="级别" align="center">
          <template #default="{row}">{{ row.level }}</template>
        </el-table-column>
        <el-table-column label="商品数量" align="center">
          <template #default="{row}">{{ row.productCount }}</template>
        </el-table-column>
        <el-table-column label="数量单位" align="center">
          <template #default="{row}">{{ row.productUnit }}</template>
        </el-table-column>
        <el-table-column label="导航栏" align="center">
          <template #default="{row}">
            <el-switch
                v-model="row.navStatus"
                :active-value="1"
                :inactive-value="0"
                @change="handleNavStatus(row.id,row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否显示" align="center">
          <template #default="{row}">
            <el-switch
                v-model="row.showStatus"
                :active-value="1"
                :inactive-value="0"
                @change="handleShowStatus(row.id,row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center">
          <template #default="{row}">
            {{ row.sort }}
          </template>
        </el-table-column>
        <el-table-column label="设置" align="center" width="400">
          <template #default="{row}">
            <el-button type="text" @click="handleShowNextLevel(row)">查看下级</el-button>
            <el-button type="text" @click="handleTransferProduct(row)">转移商品</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400" align="center">
          <template #default="{row}">
            <el-button type="primary" icon="edit" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" icon="delete" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :total="total"
          :page-sizes="[10,15,20,25,30]"
          v-model:page-size="listQuery.pageSize"
          v-model:current-page="listQuery.pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>

<style scoped lang="scss">
.cate-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;

  .list-search {
    //height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;

    .add-btn {
      display: flex;
      align-items: center;

      span {
        margin-left: 8px;
        font-size: 18px;
      }
    }
  }

  .pagination {
    margin-top: 20px;
  }
}

</style>